<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用class id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: aliceblue;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: gainsboro;
        }

        /*选中 p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
        */
        p:nth-child(1){
            background: bisque;
        }

        /*选中父元素下的p元素的第二个类型*/
        p:nth-of-type(2){
            background: green;
        }

        a:hover{
            background: #a62053;
        }

    </style>

</head>
<body>


<a href="">点击</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>



</body>
</html>